<template>
  <div class="top">
    <van-nav-bar title="登入" left-arrow @click-left="onClickLeft" />
  </div>
  <van-form @submit="submitForm" @failed="onFailed" ref="ruleFormRef" :model="form" class="yangshi">
    <van-cell-group>
      <van-field v-model="form.username" label="账号：" placeholder="请输入账号" clearable name="username"
        :rules="usernameRules"></van-field>
    </van-cell-group>
    <van-cell-group>
      <van-field v-model="form.password" label="密码：" placeholder="请输入密码" name="password" clearable type="password"
        :rules="passwordRules"></van-field>
    </van-cell-group>
    <van-cell-group>
      <van-button block round type="primary" native-type="submit">登录</van-button>
    </van-cell-group>
  </van-form>
</template>

<script setup>
import { ref, reactive } from "vue";
import { login, getUser } from "../api";
import useUser from "../store/user";
import { useRouter } from "vue-router";

const { updateUser } = useUser();
const router = useRouter();

const onClickLeft = () => {
  router.back();
};

const form = reactive({
  username: "demo1",
  password: "123456",
});
const ruleFormRef = ref();


const usernameRules = ref([
  { required: true, message: "用户名不能为空" },
  { pattern: /^\w{3,16}$/, message: "用户名长度为3-16个字符" },
]);
const passwordRules = ref([
  { required: true, message: "密码不能为空" },
  { pattern: /^\w{6,24}$/, message: "密码必须为6-24位英文字母或数字" },
]);

const submitForm = async (values) => {
  const data = await login(values);
  if (data) {
    const user = await getUser();
    updateUser({
      isLogin: true,
      username: user.username,
      avatar: user.avatar,
    });
    router.push({ name: "user" });
  }
};
const onFailed = (errorInfo) => {
  console.log("failed", errorInfo);
};
</script>

<style scoped>
.top {
  --van-nav-bar-background: #ee7a06;
  --van-nav-bar-icon-color: #fff;
  --van-nav-bar-title-text-color: #fff;
  height: 100%;
  overflow-y: scroll;
}

button {
  position: fixed;
  top: 200px;
}
</style>